<template>
  <div class="app-container">
    <div class="header">
      <div class="title1">
        <i class="el-icon-data-analysis"></i><span>海川日报数据统计</span>
      </div>
      <div class="backB">
        <img src="@/assets/images/back.png" alt="" @click="goBack" />
      </div>
    </div>
    <div class="formCenter">
      <div class="selectBox">
        <!-- <el-select size="medium" v-model="templateValue" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select> -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="调度日报" name="first"
            ><dispatchCalendar
          /></el-tab-pane>
          <el-tab-pane label="收货日报" name="second"
            ><receiveCalendar
          /></el-tab-pane>
          <el-tab-pane label="零货上架" name="third"
            ><oddGoodCalendar
          /></el-tab-pane>
          <el-tab-pane label="整件下架" name="fourth"
            ><wholesoldCalendar
          /></el-tab-pane>
          <el-tab-pane label="整件上架" name="fifth"
            ><wholeshelfCalendar
          /></el-tab-pane>
          <el-tab-pane label="外复核" name="sixth"
            ><exReviewCalendar
          /></el-tab-pane>
          <el-tab-pane label="京东仓" name="seventh"
            ><jdwarehouseCalendar
          /></el-tab-pane>
          <el-tab-pane label="中药仓" name="eighth"
            ><medicineCalendar
          /></el-tab-pane>
          <el-tab-pane label="质管部验收报告" name="ninth"
            ><qualitycheckCalendar
          /></el-tab-pane>
          <el-tab-pane label="质管部入库" name="tenth"
            ><qualityInspectCalendar
          /></el-tab-pane>
          <!--<el-tab-pane label="客服盘盈亏" name="eleventh"
            ><serviceProfitCalendar
          /></el-tab-pane>
          <el-tab-pane label="客服冲红" name="twelfth"
            ><qualityInspectQuery
          /></el-tab-pane> -->
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
// import dispatchQuery from "@/components/daily/dispatchQuery";
// import receiveQuery from "@/components/daily/receiveQuery";
// import oddGoodQuery from "@/components/daily/oddGoodQuery";
// import wholesoldQuery from "@/components/daily/wholesoldQuery";
// import wholeshelfQuery from "@/components/daily/wholeshelfQuery";
// import exReviewQuery from "@/components/daily/exReviewQuery";
// import jdwarehouseQuery from "@/components/daily/jdwarehouseQuery";
// import medicineQuery from "@/components/daily/medicineQuery";
// import qualitycheckQuery from "@/components/daily/qualitycheckQuery";
// import qualityInspectQuery from "@/components/daily/qualityInspectQuery";
// import serviceProfitQuery from "@/components/daily/serviceProfitQuery";
// import serviceRedQuery from "@/components/daily/serviceRedQuery";
import dispatchCalendar from "@/components/daily/dispatchCalendar";
import receiveCalendar from "@/components/daily/receiveCalendar";
import oddGoodCalendar from "@/components/daily/oddGoodCalendar";
import wholesoldCalendar from "@/components/daily/wholesoldCalendar";
import wholeshelfCalendar from "@/components/daily/wholeshelfCalendar";
import exReviewCalendar from "@/components/daily/exReviewCalendar";
import jdwarehouseCalendar from "@/components/daily/jdwarehouseCalendar";
import medicineCalendar from "@/components/daily/medicineCalendar";
import qualitycheckCalendar from "@/components/daily/qualitycheckCalendar";
import qualityInspectCalendar from "@/components/daily/qualityInspectCalendar";
// import serviceProfitCalendar from "@/components/daily/serviceProfitCalendar";
export default {
  components: {
    // dispatchQuery,
    // receiveQuery,
    // oddGoodQuery,
    // wholesoldQuery,
    // wholeshelfQuery,
    // exReviewQuery,
    // jdwarehouseQuery,
    // medicineQuery,
    // qualitycheckQuery,
    // qualityInspectQuery,
    // serviceProfitQuery,
    // serviceRedQuery,
    // 日历
    dispatchCalendar,
    receiveCalendar,
    oddGoodCalendar,
    wholesoldCalendar,
    wholeshelfCalendar,
    exReviewCalendar,
    jdwarehouseCalendar,
    medicineCalendar,
    qualitycheckCalendar,
    qualityInspectCalendar,
    // serviceProfitCalendar,
  },
  data() {
    return {
      // 标签显示页
      // calendarType: "调度日报",
      activeName: "first",
      systemTime: "",
      templateValue: "1",
      options: [
        {
          value: "1",
          label: "调度日报",
        },
        {
          value: "2",
          label: "收货日报",
        },
        {
          value: "3",
          label: "零货上架",
        },
        {
          value: "4",
          label: "整件下架",
        },
        {
          value: "5",
          label: "整件上架",
        },
        {
          value: "6",
          label: "外复核",
        },
        {
          value: "7",
          label: "京东仓",
        },
        {
          value: "8",
          label: "中药仓",
        },
        {
          value: "9",
          label: "质管部验收报告",
        },
        {
          value: "10",
          label: "质管部入库",
        },
        // {
        //   value: "11",
        //   label: "客服盘盈亏",
        // },
        // {
        //   value: "12",
        //   label: "客服冲红",
        // },
      ],
    };
  },
  mounted() {
    // 创建一个 Date 对象
    const currentDate = new Date();
    // 获取当前年份
    const year = currentDate.getFullYear();
    // 获取当前月份（注意：月份是从 0 开始计数的，所以需要加 1）
    const month = currentDate.getMonth() + 1;
    // 获取当前日期
    const day = currentDate.getDate();
    // 打印年月日
    this.systemTime = `${year}年${month}月${day}日`;
    // this.getTodayList();
  },
  beforeDestroy() {},
  methods: {
    handleClick(tab, event) {
      console.log(tab.index, tab.label, event);
      // this.calendarType = tab.label;
    },
    goBack() {
      this.$router.push("/subSystem1");
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  height: 100%;
  background: #ffffff;
  .el-icon-data-analysis::before {
    color: #00d9ff;
    margin-right: 8px;
  }

  .header {
    margin-top: -10px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title1 {
      font-size: 16px;
      color: #808080;
      width: 170px;
      padding: 5px;
      border-bottom: 1px dotted #8ddfff;
    }
    .backB {
      cursor: pointer;

      img {
        width: 20%;
      }
    }
  }
  .formCenter {
    display: flex;
    flex-direction: column;
    align-items: center;
    .selectBox {
      height: 60px;
      line-height: 60px;
      width: 80%;
      text-align: center;
      ::v-deep .el-select {
        width: 16%;
      }
    }
  }
}
</style>